---
section: Usage
title: Next.js
slug: /docs/next/
order: 45
---

# Next.js

Configure your [Next.js](https://nextjs.org/) project to import SVG as React components in your application.

<carbon-ad />

## Install

```bash
npm install --save-dev @svgr/webpack
# or use yarn
yarn add --dev @svgr/webpack
```

## Usage

Using SVGR in Next.js is possible with `@svgr/webpack`.

**next.config.js**

```js
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            icon: true,
          },
        },
      ],
    });
    return config;
  },
  turbopack: {
    rules: {
      "*.svg": {
        loaders: ["@svgr/webpack"],
        as: "*.js",
      },
    },
  }
  /* other config options here */
};

export default nextConfig;

```

**Your code**

```js
import Star from './star.svg'

const Example = () => (
  <div>
    <Star />
  </div>
)
```

Or, using the classic (URL) import:

```js
import Image from 'next/image'
import starUrl from './star.svg?url'

const Example = () => (
  <div>
    <Image src={starUrl} />
  </div>
)
```

Please refer to [SVGR webpack guide](/docs/webpack/) for advanced use cases.

## TypeScript

Using SVGR with TypeScript support.

**Type decleration**

Add a custom type decleration file (e.g. **svgr.d.ts**) to the root of your repo.

```ts
declare module '*.svg' {
  import { FC, SVGProps } from 'react'
  const content: FC<SVGProps<SVGElement>>
  export default content
}

declare module '*.svg?url' {
  const content: any
  export default content
}
```

**tsconfig.json**

Add the type decleration file to your tsconfig.json's `include` array. **Ensure it's the first item.**

```json
{
  "include": [
    "svgr.d.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ]
  // ...other config
}
```
